<script setup>
defineProps({
  icon: {
    type: String,
    default: '📂'
  },
  text: {
    type: String,
    required: true
  },
  buttonText: {
    type: String,
    default: ''
  },
  showButton: {
    type: Boolean,
    default: true
  },
  isMine: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['action']);

function handleAction() {
  emit('action');
}
</script>

<template>
  <div class="empty-content">
    <div class="empty-icon">{{ icon }}</div>
    <div class="empty-text">{{ text }}</div>
    <button 
      v-if="showButton && buttonText && isMine" 
      class="action-button" 
      @click="handleAction"
    >
      {{ buttonText }}
    </button>
  </div>
</template>

<style scoped lang="scss">
.empty-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #99a3a7;
  border-radius: 12px;
  background-color: #1f2129;
  padding: 32px;

  .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
  }

  .empty-text {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }

  .action-button {
    padding: 10px 24px;
    background: linear-gradient(45deg, #0096ff, #6c47ff);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 150, 255, 0.3);
    }
  }
}
</style>